<template>
  <Dialog v-model="dialogVisible" title="设置数据" :scroll="true">
    <el-alert
      show-icon
      :closable="false"
      title="删除选项时，因将value作为id使用，在编辑时请确保value值的唯一性"
      type="info"
    />
    <el-tree :data="linkOption" @node-click="handleNodeClick" draggable :props="optionProps">
      <template #default="{ node, data }">
        <div class="ex-property-col">
          <div class="flex flex-col">
            <el-input v-model="data[optionProps.label]">
              <template #prepend>选项名</template>
            </el-input>
            <el-input class="mt-10px mb-10px" v-model="data[optionProps.value]"
              ><template #prepend>选项值</template></el-input
            >
            <AppLinkInput v-model="data[optionProps.url]" />
          </div>
          <div class="flex flex-col items-center justify-center ml-10px mt-10px">
            <UploadImg v-model="data[optionProps.imgUrl]" :width="'100px'" :height="'100px'" />
          </div>

          <el-button
            @click.stop="handleAddChild(data)"
            class="ml-10px w-30px"
            type="primary"
            plain
            circle
          >
            <Icon icon="ep:plus"
          /></el-button>
          <el-button
            @click.stop="handleDel(node, data)"
            class="ml-10px w-30px"
            type="danger"
            plain
            circle
          >
            <Icon icon="ep:minus"
          /></el-button>
        </div>
      </template>
    </el-tree>
    <!-- 底部对话框操作按钮 -->
    <template #footer>
      <el-button type="primary" plain @click="handleAdd">添 加 选 项</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import type Node from 'element-plus/es/components/tree/src/model/node'
/** 打开弹窗 */
const dialogVisible = ref(false)
const linkOption = ref([] as any)
const optionProps = ref({
  label: 'label',
  value: 'value',
  children: 'children',
  url: 'url', //跳转链接
  imgUrl: 'imgUrl' //图片链接
} as any)
const open = (options: any) => {
  linkOption.value = options
  dialogVisible.value = true
}
const settingOptions = computed({
  get: () => linkOption.value,
  set: (val) => val
})
type TreeData = { [key: string]: any }
const getOptions = (value: string | number) => {
  let item: TreeData = {}
  item[optionProps.value.label] = 'new option'
  item[optionProps.value.value] = value
  item[optionProps.value.children] = []
  item[optionProps.value.url] = ''
  item[optionProps.value.imgUrl] = ''
  return item
}
const handleAdd = () => {
  let len = settingOptions.value.length + 1
  console.log(settingOptions)

  settingOptions.value.push(getOptions(len))
}
const handleDel = (node: Node, data: TreeData) => {
  const parent = node.parent
  let parentChildren = parent.data[optionProps.value.children] as TreeData[]
  const children = parentChildren || parent.data
  const index = children.findIndex((d) => d.value === data.value)
  if (data.children?.length > 0) {
    ElMessage.error('该节点还存在子节点，无法删除')
    return
  }
  children.splice(index, 1)
}
const handleAddChild = (data: TreeData) => {
  if (!data[optionProps.value.children]) data[optionProps.value.children] = []
  let children = data[optionProps.value.children]
  let value = data[optionProps.value.value]
  let len = children.length + 1
  let text = value + '-' + len
  console.log(text)

  children.push(getOptions(text))
}
const handleNodeClick = () => {
  // console.log(settingOptions.value);
}
const emit = defineEmits(['change'])
const handleSubmit = () => {
  dialogVisible.value = false
  console.log(linkOption.value)
  emit('change', linkOption.value)
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.el-tree-node__content) {
  height: auto;
  padding: 3px 0;
}

.ex-property-col {
  display: flex;
  align-items: center;
  list-style: none;
  text-decoration: none;
}

.ex-property-col_title {
  display: inline-block;
  width: 130px;
  font-size: 13px;
}
</style>
